<template>
    <el-card class="card">
        <span class="pbtn"></span>
        <span style="font-size: 20px; margin-bottom: 20px;">资讯管理</span>
        <el-form>
            <el-form-item>
                <el-col span="6">
                    <DatePicker></DatePicker>
                </el-col>
                <el-col span="6">
                    <el-autocomplete style="margin-left: 20px;width: 300px;line-height: 55px; height: 50px;"
                        v-model="articleList.searchKey" :fetch-suggestions="querySearch" popper-class="my-autocomplete"
                        placeholder="请输入关键字" @select="handleSelect">
                        <template #suffix>
                            <el-icon @click="handleIconClick">
                                <Search />
                            </el-icon>
                            &nbsp;&nbsp;
                            <el-icon @click="cancelIconClick">
                                <Close />
                            </el-icon>
                        </template>
                    </el-autocomplete>
                </el-col>
                <el-col span="6" style="margin-left: 23%;">
                    <el-button @click="publishText" style="width: 120px;height:50px;border-radius: 20px;"
                        type="primary">发布文章</el-button>
                </el-col>
            </el-form-item>
        </el-form>
        <el-table :data="articleData.result" stripe style="width: 100%">
            <el-table-column align="center" prop="id" label="序号" width="100" />
            <el-table-column align="center" prop="picture" label="列表图" width="100">
                <template #default="scope">
                    <el-image style="width: 50px; height: 50px" :src="`http://127.0.0.1:3000/${scope.row.picture}`"
                        fit="fill" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="title" label="文章标题" width="200" />
            <el-table-column align="center" prop="type" label="文章类型" width="180" />
            <el-table-column align="center" prop="publisher" label="发布人" width="150" />
            <!-- <el-table-column prop="content" label="文章内容" width="180" /> -->
            <el-table-column align="center" prop="status" label="发布状态" width="150" />
            <el-table-column align="center" prop="collectNum" label="收藏量" width="100" />
            <el-table-column align="center" prop="date" label="操作" width="180">
                <template #default="scope">
                    <el-button type="primary" link @click="editArticleList(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="deleteArticleList(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination :list="articleList" :res="articleData" @changeCount="changeCount" @changePage="changePage">
        </Pagination>
    </el-card>
</template>

<script lang='ts' setup>
import DatePicker from '../ccc/DatePicker.vue';
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const publishText = () => {
    router.push('zx/addText')
}
import { reactive, onMounted } from 'vue'
import { LabelSearchType, LabelReaultType } from '@/types/ccc/lable'
import api from '@/api'
import Pagination from '../ccc/Pagination.vue';
import { Search, Close } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const articleList = reactive<LabelSearchType>({
    searchKey: '',
    page: 1,
    count: 10
})
const articleData = reactive<LabelReaultType>({
    total: 0,
    totalPage: 0,
    result: []
})
const getArticle = async () => {
    const result = await api.systemSetting.article.getAllArticleApi(articleList)
    console.log(result.data.data.result);
    articleData.result = result.data.data.result
    articleData.total = result.data.data.total
    articleData.totalPage = result.data.data.totalPage
}
onMounted(() => {
    getArticle()
})
const editArticleList = async (item: any) => {
    console.log(item);
    item = JSON.stringify(item)
    localStorage.setItem('item', item)
    router.push('zx/EditText')

    //const result=await api.systemSetting.article.getAllArticleApi()
}
const deleteArticleList = async (id: number) => {
    console.log(id);
    const result = await api.systemSetting.article.delArticleByIdApi(id)
    console.log(result);
    if (result.data.code === 200) {
        ElMessage.success(result.data.msg)

    } else {
        ElMessage.warning(result.data.msg)

    }
    getArticle()


}
const changeCount = (arg: number) => {
    articleList.count = arg
    getArticle()

}
const changePage = (arg: number) => {
    articleList.page = arg
    getArticle()
}



interface LinkItem {
    value: string
    link: string
}

const links = ref<LinkItem[]>([])

const querySearch = (queryString: string, cb: any) => {
    const results = queryString
        ? links.value.filter(createFilter(queryString))
        : links.value
    // call callback function to return suggestion objects
    cb(results)
}
const createFilter = (queryString: any) => {
    return (restaurant: any) => {
        return (
            restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
        )
    }
}

const handleSelect = (item: LinkItem) => {
    console.log(item)
}

const handleIconClick = (ev: Event) => {
    console.log(ev)
    console.log(articleList.searchKey);
    getArticle()
}
const cancelIconClick = () => {
    articleList.searchKey = ''
    getArticle()

}

</script>

<style lang='scss' scoped>
.card {
    width: 1150px;
    margin: auto;
    padding: 20px;
    box-sizing: border-box;
    background-color: white;
    min-height: 100vh;
}

.pbtn {
    display: inline-block;
    width: 8px;
    height: 18px;
    border-radius: 20px;
    background-color: #409eff;
    margin-right: 10px;
}


.search {
    margin-left: 10px;
    margin-top: 10px;
    height: px;
    width: 300px;
}
</style>